<template>
	<div class="advice-note">
		<div class="title">购车事项通知书</div>
		<div class="content">
			<div class="content-1">
				<div class="userInfo"><span>客户信息</span></div>
				<div class="content-1-1">
					<div>
						<div class="left">客户姓名</div>
						<div class="right">{{applicationInfo.clientName || '---'}}</div>
					</div>
					<div>
						<div class="left">身份证号</div>
						<div class="right">{{applicationInfo.identityCard || '---'}}</div>
					</div>
					<div>
						<div class="left">联系方式</div>
						<div class="right">{{applicationInfo.mobile || '---'}}</div>
					</div>
					<div>
						<div class="left">上牌地区</div>
						<div class="right">{{applicationInfo.registrationArea || '---'}}</div>
					</div>
				</div>
			</div>
			
			<div class="content-1 more">
				<div class="userInfo"><span>车型确认</span></div>
				<div class="content-1-1">
					<div>
						<div class="left">品牌名称</div>
						<div class="right">{{applicationInfo.brand || '---'}}</div>
					</div>
					<div>
						<div class="left">车型版本</div>
						<div class="right">{{applicationInfo.carModels || '---'}}</div>
					</div>
					<div>
						<div class="left">指导价</div>
						<div class="right">{{applicationInfo.guidedPrice || '---'}}</div>
					</div>
					<div>
						<div class="left">颜色</div>
						<div class="right">{{applicationInfo.carColor || '---'}}</div>
					</div>
					<div>
						<div class="left">数量</div>
						<div class="right">{{applicationInfo.quantity || '---'}}</div>
					</div>
					<div>
						<div class="left">合计金额</div>
						<div class="right">{{applicationInfo.amount || '---'}}</div>
					</div>
					<div>
						<div class="left">大写</div>
						<div class="right">{{applicationInfo.amountBig || '---'}}</div>
					</div>
				</div>
			</div>

			<div class="content-1">
				<div class="userInfo"><span>付款方式</span></div>
				<div class="content-1-1">
					<div>
						<div class="left">付款方式</div>
						<div class="right"><span class="special">{{applicationInfo.paymentMethod || '---'}}</span></div>
					</div>
					<div>
						<div class="left">收款方</div>
						<div class="right">{{applicationInfo.payee || '---'}}</div>
					</div>
					<div>
						<div class="left">户名</div>
						<div class="right">{{applicationInfo.userName || '---'}}</div>
					</div>
					<div>
						<div class="left">账户</div>
						<div class="right">{{applicationInfo.account || '---'}}</div>
					</div>
					<div>
						<div class="left">开户行</div>
						<div class="right">{{applicationInfo.openingBank || '---'}}</div>
					</div>
					<div>
						<div class="left">首付款</div>
						<div class="right"><span class="more-color">￥{{applicationInfo.downPayment || '---'}}</span></div>
					</div>
					<div>
						<div class="left">提车方式</div>
						<div class="right">{{applicationInfo.carWay || '---'}}</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default{
    props: {
      applicationInfo: {
        type: Object
      }
    },
		data(){
			return {}
		},
		created() {
			// console.log(this.applicationInfo)
		}
}
</script>

<style scoped lang="less">
	.more {
		margin: 16px 0;
	}
	.special{
		border-radius: 4px;
		border: 1px solid #000000;
		padding: 2px 5px;
	}
	.more-color{
		color: #F72020;
	}
	.advice-note{
		padding-top: 20px;
		background-color: white;
		.title{
			height: 36px;
			width: 40%;
			font-size: 14px;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			background-color: #000000;
			border-radius: 0px 100px 100px 0px;
			text-align: center;
			line-height: 36px;
		}
		.content{
			padding: 26.5px 16px;
			.content-1{
				border-radius: 5px;
				border: 1px solid #CCCCCC;
				padding: 19.5px 0 16px 0;
				.userInfo{
					font-size: 20px;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #333333;
					margin-bottom: 16px;
					border-left: 6px solid #F6C401;
					span{
						padding-left: 10px;
					}
				}
				.content-1-1{
					padding: 0 16px;
					div{
						display: flex;
						justify-content: space-between;
						margin: 2% 0;
						.left{
							font-size: 15px;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #666666;
						}
						.right{
							font-size: 15px;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #000000;
						}
					}
				}
				
			}

		}
	}
		
</style>